<ResponsiveResizer {clientWidth} {clientHeight} minWidth={768}>
  <div class="container">
  <aside class="sidebar">
    {#if backLink}
      <a class="backlink" href={backLink}>← back to main article</a>
    {/if}
    <div class="panels">
      <div class="filter" style="display: {showClassFilter ? 'block' : 'none'}">
        <Panel>
          <h2 slot="head">Class Filter</h2>
          <div slot="body">
            <AppClassFilter
              bind:classHeatmap
            />
          </div>
        </Panel>
      </div>
      <div class="stack" style="display: {showLayerChooser ? 'block' : 'none'};">
        <Panel>
          <h2 slot="head">Layer</h2>
          <div slot="body">
            <AppLayerChooser
              bind:layerName
              {classHeatmap}
            />
          </div>
        </Panel>
      </div>
    </div>
  </aside>
  <div class="main">
    <div class="atlas">
        <Atlas
          ref:atlas
          id="inceptionv1_{layerName}"
          strokeColor="#666"
          backgroundColor="#dfdfdf"
          showHoverImage={false}
          bind:density
          {classHeatmap}
          bind:iconCrop 
          bind:classHeatmapMultiplier
          bind:classHeatmapPositive
          bind:autoGridSizeMultiplier
          bind:gridSize
          bind:showLabels
          bind:enableHover
          bind:scale
          bind:gcx
          bind:gcy
          bind:extent
          bind:scrollWheel="$scroll"
          {homeX}
          {homeY}
          {homeScale}
        />
        <div ref:controls class="controls {showOptions ? 'open' : 'closed'}">
          <div class="nav">
            <div class="map">
              <div class="map-container" style="width: 100px; height: 100px; position: absolute;">
                <AppMiniMap 
                  id="inceptionv1_{layerName}"
                  {layerName}
                  bind:extent
                  enableDragging={true}
                  {classHeatmap}
                  {scaleCountFactor}
                  on:drag="refs.atlas.translateTo(event.gcx, event.gcy)"
                />
              </div>
            </div>
            <div class="buttons">
              <Button on:click="refs.atlas.home(3000)"><Navigation name="home" color="white"/></Button>
              <Button on:click="refs.atlas.scaleBy(2)"><Navigation name="add" color="white"/></Button>
              <Button on:click="refs.atlas.scaleBy(0.5)"><Navigation name="remove" color="white"/></Button>
            </div>
          </div>
          <div class="options">
            <div class="essential">
              <label style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"><input type=checkbox bind:checked=showLabels> attribution labels</label>
              <label><input type=checkbox bind:checked="enableHover"> show tooltip</label>
              <label><input type=checkbox bind:checked="$scroll"> scroll to zoom</label>
              {#if shareLink}
                <button style="font-size: 10px; margin-top: 4px;" href="#" on:click="copyShareLink()">Copy link to this view</button>
              {/if}
            </div>
            <div ref:expand class="expand">
              <div class="grid-size">
                
                <div class="section">
                  <h3>Grid size</h3>
                  <label><input type=radio bind:group=gridSize value={0}> 20x20</label>
                  <label><input type=radio bind:group=gridSize value={1}> 40x40</label>
                  <label><input type=radio bind:group=gridSize value={2}> 80x80</label>
                  <label><input type=radio bind:group=gridSize value={3}> 160x160</label>
                  <label><input type=radio bind:group=gridSize value={4}> 320x320</label>
                  <label><input type=radio bind:group=gridSize value={-1}> auto</label>
                  <div style="display: {gridSize == -1 ? 'none': 'none'};">
                    <div>auto threshold: {@html autoGridSizeMultiplier}</div>
                    <input type="range" min={0.5} max={1.4} step={0.01} bind:value=autoGridSizeMultiplier>
                  </div>
                  </div>
                <div class="section" >
                  <h3>Icon density: {@html density}</h3>
                  <input type="range" min={0.2} max={8} step={0.01} bind:value=density>
                  <!-- <br>
                  <div>crop: {@html iconCrop}</div>
                  <input type="range" min={0} max={0.5} step={0.01} bind:value=iconCrop> -->
                </div>
                <div class="section"  style="display: {classHeatmap > -1 ? 'block' : 'none'}">
                  <h3>Class filter</h3>
                  <label><input type=radio bind:group=classHeatmapPositive value={1}> positive influence</label>
                  <label><input type=radio bind:group=classHeatmapPositive value={-1}> negative influence</label>
                  <div>Intensity: {@html classHeatmapMultiplier}</div>
                  <input type="range" min=0.5 max=2 step=0.1 bind:value=classHeatmapMultiplier>
                </div>
                <div class="section">
                  <h3>Location</h3>
                  <div>x: {format(gcx)}</div>
                  <div>y: {format(gcy)}</div>
                  <div>scale: {format(scale)}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="expand-toggle">
            <button on:click="toggle()">{@html showOptions ? 'fewer options' : 'more options'}</button>
          </div>
        </div>
    </div>
  </div>
</div>
</ResponsiveResizer>

<script>
import {format as f} from "d3-format";
import {locationWithoutQuery} from "../util.js";

const formatFloat = f(".3f");

export default {
  components: { 
    Button: "../library/Button.html",
    Navigation: "../library/icons/Navigation.html",
    AppMiniMap: "./AppMiniMap.html",
    AppLayerChooser: "./AppLayerChooser.html",
    AppClassFilter: "./AppClassFilter.html",
    Atlas: "../Atlas.html",
    Panel: "../library/App/Panel.html",
    ResponsiveResizer: "../library/ResponsiveResizer.html"
  },
  data() {
    return {
      layerName: "mixed4c",
      gridSize: 1,
      classHeatmap: -1,
      iconScaleFactor: 0.8,
      iconCrop: 0.35,
      showClassFilter: true,
      showLayerChooser: true,
      showOptions: true,
      homeX: .5,
      homeY: .5,
      homeScale: 1,
      shareLink: false,
      backLink: false
    }
  },
  oncreate() {
    const {loadTarget} = this.get();
    const query = new URLSearchParams(window.location.search);
    if (query.has("layer")) {
      const layerName = decodeURIComponent(query.get("layer"));
      this.set({layerName});
    }
    if (loadTarget) {
      setTimeout(() => {
      this.zoomTo(loadTarget.x, loadTarget.y, loadTarget.scale, 0);
      }, 10);
    }
    if (query.has("poi")) {
      const poiString = query.get("poi");
      const parts = poiString.split(",").map(parseFloat);
      setTimeout(() => {
        this.zoomTo(...parts, 4000);
      }, 1000);
    }
  },
  computed: {
    realGridSize: ({gridSize}) => (gridSize + 1) * 20,
    scaleCountFactor: ({iconScaleFactor, realGridSize}) =>  1000000 / (realGridSize * realGridSize * iconScaleFactor)
  },
  methods: {
    home(duration) {
      this.refs.atlas.home(duration)
    },
    zoomTo(x, y, scale, duration = 1000) {
      this.refs.atlas.zoomTo(x, y, scale, duration);
    },
    toggle() {
      const {showOptions} = this.get();
      this.set({
        showOptions: !showOptions
      });
    },
    copyShareLink() {
      const {layerName} = this.get();
      const {gcx, gcy, scale} = this.refs.atlas.get();
      const query = `layer=${encodeURIComponent(layerName)}&poi=${[gcx, gcy, scale].map(formatFloat).join(",")}`;
      const url = locationWithoutQuery() + "?" + query;
      window.navigator.clipboard.writeText(url).then(function() {
        console.log("Copied to clipboard");
      }, function() {
        console.error("Unable to copy to clipboard");
      });
    }
  },
  helpers: {
    format: formatFloat
  }
}
</script>

<style>
  .container {
    height: 100%;
    box-sizing: border-box;
    grid-column: screen;
    display: flex;
    overflow: hidden;
    contain: strict;
    font-size: 12px;
    position: relative;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
  }

  .panels {
    display: flex;
    flex-direction: row;
    height: 100%;
  }

  .backlink {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0 16px;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    color: black;
  }

  .backlink:hover {
    background-color: rgba(255, 130, 0, 0.04);
  }

  /*  */
  .filter {
    width: 120px;
    border-right: solid 1px rgba(0, 0, 0, 0.2);
  }
  .stack {
    overflow-y: scroll;
    width: 120px;
    border-right: solid 1px rgba(0, 0, 0, 0.2);
    height: 100%;
  }
  .main {
    flex-grow: 1;
    padding: 8px;
    box-sizing: border-box;
    height: 100%;
  }
  .atlas {
    height: calc(100%);
    position: relative;
  }
  /*  */



  /*  */
  .controls {
    position: absolute;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    right: 16px;
    top: 16px;
    width: 122px;
    padding: 8px;
    background-color: white;
    border-radius: 6px;
    border: solid 1px rgba(0, 0, 0, 0.2);
    line-height: 1.7em;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 48px);
  }

  ref:controls label {
    display: block;
    color: rgba(0, 0, 0, 0.7);
  }
  
  ref:controls .nav {
    flex: 0 0 auto;
    display: flex;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    padding-bottom: 8px;
  }
  ref:controls .nav .map {
    position: relative;
    visibility: hidden;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  ref:controls .nav .buttons {
    width: 100%;
    justify-items: center;
    display: grid;
    grid-gap: 4px;
    grid-auto-columns: auto;
    grid-auto-flow: column;
  }
  ref:controls .expand-toggle {
    flex: 0 0 auto;
    /* border-top: solid 1px rgba(0, 0, 0, 0.1); */
    /* padding-top: 8px; */
  }
  ref:controls .expand-toggle button {
    display: block;
    width: 100%;
    line-height: 1.5em;
    font-size: 10px;
  }

  ref:controls .section {
    margin-top: 8px;
    border-top: solid 1px rgba(0, 0, 0, 0.1);
    padding-top: 8px;
    color: rgba(0, 0, 0, 0.7);
  }

  ref:controls .section h3 {
    color: rgba(0, 0, 0, 1);
    margin: 0 0 4px 0;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
  }

  ref:controls .options {
    flex: 1 1;
    overflow-y: scroll;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  ref:controls.closed .expand {
    height: 0;
    overflow: hidden;
  }
  ref:controls.open .expand {
    height: auto;
  }
  ref:controls.open .options {
    margin-bottom: 8px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  }
  @media(min-width: 800px) {
    .filter {
      width: 170px;
    }
    .stack {
      width: 170px;
    }
    .controls {
      width: 160px;
    }
    ref:controls .nav .map {
      visibility: visible;
      height: auto;
      width: 104px;
      margin-right: 8px;
      pointer-events: all;
    }
    ref:controls .nav .buttons {
      width: inherit;
      grid-auto-flow: row;
    }
  }

</style>
